<template>
    <div class="app-container read">
        <div class="read-top" v-loading="loading">
            <div class="swiper">
                <el-carousel trigger="click" height="256px">
                    <el-carousel-item v-for="(item,index) in classList" :key="index" >
                        <span class="cover" @click="goToInfo(item)" v-if="item.cover" :style="{backgroundImage:'url('+item.cover+')'}"></span>
                        <span class="cover" @click="goToInfo(item)" v-else style="backgroundImage:url('../../../static/images/base/video-box.png')"></span>
                        <div class="desc" @click="goToInfo(item)">
                          <span>{{item.mainTitle}}</span>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="read-top-right">
                <div class="item" v-for="(item,index) in list" :key="index" @click="goToInfo(item)">
                    <span class="item-cover" v-if="item.cover" :style="{backgroundImage:'url('+item.cover+')'}"></span>
                    <span class="item-cover" v-else style="backgroundImage:url('../../../static/images/base/video-box.png')"></span>
                    <span class="item-title">{{item.mainTitle}}</span>
                </div>
            </div>
        </div>
        <div class="read-bottom">
            <span class="title">文章推荐</span>
            <div class="content">
                <div class="block" v-for="(item,index) in classList" :key="index"  @click="goToInfo(item)">
                    <div class="item">
                        <span class="item-cover" v-if="item.cover" :style="{backgroundImage:'url('+item.cover+')'}"></span>
                        <span class="item-cover" v-else style="backgroundImage:url('../../../static/images/base/video-box.png')"></span>
                        <div class="item-right">
                            <span class="name"  v-html="item.mainTitle">“小葱轻食记”——奶盖太贵买不起，那就自己一杯吧！</span>
                            <span class="author" v-html="item.author">文：葱油饼不带葱</span>
                            <!--<span class="desc">时下最流行的饮品应该就是奶盖了，街面上琳琅满目的品牌，都在卖奶盖，可是动辄十时下最流行的饮品应该就是奶盖了，街面上琳琅满目的品牌，都在卖奶盖，可是动辄十</span>-->
                        </div>
                    </div>
                </div>
            </div>
            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
  import {GetReadList} from "@/api/Api";
  import {index} from "@/api/index";
  export default {
  data() {
    return {
      swiperList: [
        {
          title: "在所有人事已非的景色里"
        },
        {
          title: "在所有人事已非的景色里"
        },
        {
          title: "在所有人事已非的景色里"
        },
        {
          title: "在所有人事已非的景色里"
        }
      ],
      list:[],
      classList:[],
      total:0,
      pageSize:8,
      currentPage:0,
      type_name:null,
      loading:true,
      ReadColumnId:sessionStorage.getItem('ReadColumnId')
    };
  },
    created(){
      this.currentPage = Number(this.$route.query.currentPage)||1
      GetReadList(1,this.ReadColumnId,this.currentPage,this.pageSize)
        .then(result=>{
          this.total = result.total
          this.currentPage = Number(this.$route.query.currentPage)||1
          this.classList = result.data
        })
        index().then(res=>{
          this.loading=false
          const list = res.data.data
          list.map(i=>{
            console.log(i)
            if(i.columnKindDes==2){
              this.list = i.recommendResList
            }
          })
        })
    },
  components: {},
  methods: {
    goToInfo(item) {
      this.$router.push("/read/content?articleId="+item.articleId+"&title="+item.mainTitle+"&cover="+item.cover);
    },
    handleSizeChange(val) {
      this.$router.push(this.$route.path+'?currentPage='+this.currentPage)
    },
    handleCurrentChange(val) {
      this.$router.push(this.$route.path+'?currentPage='+this.currentPage)
    }
  },
    watch:{
      '$route'(){
        console.log(1)
        this.loading = true
        this.currentPage = Number(this.$route.query.currentPage)||1
        GetReadList(1,this.ReadColumnId,this.currentPage,this.pageSize)
          .then(result=>{
            this.loading=false
            this.classList = result.data
          })
      }
    }
};
</script>
<style lang="less" scoped>
.read {
  margin-top: 20px;
  .read-top {
    display: flex;
    .swiper {
      height: 256px;
      width: 500px;
      .cover {
        display: block;
        width: 100%;
        height: 100%;
        background: url("/static/images/base/banner.png") no-repeat;
        background-size: cover;
        cursor: pointer;
      }
      .desc {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        position: absolute;
        width: calc(100% - 20px);
        bottom: 0px;
        height: 50px;
        line-height: 50px;
        padding-left: 20px;
        font-size: 16px;
        cursor: pointer;
        span{
          display:block;
          width: 240px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
    }
    .read-top-right {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      .item:nth-child(1),
      .item:nth-child(2),
      .item:nth-child(3) {
        margin-bottom: 13px;
      }
      .item {
        margin-left: 20px;
        cursor: pointer;
        width: 213px;
        height: 120px;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
        .item-cover {
          display: block;
          width: 218px;
          height: 120px;
          background: url("/static/images/base/banner.png") no-repeat;
          background-size: cover;
        }
        .item-title {
          padding-left: 8px;
          position: absolute;
          height: 30px;
          line-height: 30px;
          width: calc(100% - 8px);
          background: rgba(0, 0, 0, 0.5);
          bottom: 0px;
          font-size: 12px;
          color: #fff;
           overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  .read-bottom {
    margin-top: 30px;
    background: #fff;
    border-radius: 10px;
    padding: 0 20px 20px 20px;
    .title {
      display: block;
      border-bottom: 1px solid #c1c1c1;
      padding: 20px 0;
      font-size: 26px;
    }
    .content {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-bottom: 30px;
      border-bottom: 1px solid #eaeaea;
      .block {
        width: 100%;
        margin-top: 20px;
        padding-bottom: 24px;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: -1px;
        .item {
          display: flex;
          cursor: pointer;
          .item-cover {
            width: 322px;
            height: 160px;
            border-radius: 10px;
            background: url("/static/images/base/read_box.png") no-repeat;
            background-size: cover;
            box-shadow: 0 2px 10px rgba(0,0,0,0.4);
          }
          .item-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-left: 20px;
            .name {
              font-size: 20px;
              margin-top: 28px;
            }
            .author {
              font-size: 18px;
              color: #a1a1a1;
              margin-top: 20px;
            }
            .desc {
              font-size: 16px;
              color: #a1a1a1;
              margin-top: 22px;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="less">
.custom-dz{
  .read .swiper .el-carousel__indicator.is-active button{
    background-color: #e93926;

  }
}
.read{
.swiper {
  position: relative;
  .el-carousel__indicators {
    right: 0;
    left: auto;
  }
  .el-carousel__indicator {
    padding: 20px 4px;
  }
  .el-carousel__item {
  }
  .el-carousel__button {
    opacity: 1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
  }
  .el-carousel__indicator.is-active button {
    background-color: #1de3af;
  }

  .el-carousel {
    border-radius: 10px;
  }
}
}
</style>


